<template>
    <a-locale-provider :locale="locale">
        <div style="width: 980px;margin: 0 auto;">

            <a-divider>Button 按钮示例</a-divider>
            <h4>Basic</h4>
            <a-button-group>
                <a-button>Cancel</a-button>
                <a-button type="primary">
                    OK
                </a-button>
            </a-button-group>
            <a-button type="primary" shape="circle" icon="search"/>
            <a-button type="primary" shape="circle">
                A
            </a-button>
            <a-button type="primary" icon="search">
                Search
            </a-button>
            <a-button shape="circle" icon="search"/>
            <a-button icon="search">
                Search
            </a-button>
            <a-button shape="circle" icon="search"/>
            <a-button icon="search">
                Search
            </a-button>
            <a-button type="dashed" shape="circle" icon="search"/>
            <a-button type="dashed" icon="search">
                Search
            </a-button>

            <a-divider>Icon 图标示例</a-divider>
            <a-icon type="home"/>
            <a-icon type="setting" theme="filled"/>
            <a-icon type="smile" theme="outlined"/>
            <a-icon type="sync" spin/>
            <a-icon type="smile" :rotate="180"/>
            <a-icon type="loading"/>
            <a-icon type="smile" theme="twoTone"/>
            <a-icon type="heart" theme="twoTone" two-tone-color="#eb2f96"/>
            <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a"/>

            <a-divider>Affix 固钉示例</a-divider>
            <a-affix :offset-top="top">
                <a-button type="primary" @click="top += 10">
                    Affix top
                </a-button>
            </a-affix>
            <br/>
            <a-affix :offset-bottom="bottom">
                <a-button type="primary" @click="bottom += 10">
                    Affix bottom
                </a-button>
            </a-affix>

            <a-divider>Breadcrumb 面包屑示例</a-divider>
            <a-breadcrumb separator="">
                <a-breadcrumb-item>Location</a-breadcrumb-item>
                <a-breadcrumb-separator>:</a-breadcrumb-separator>
                <a-breadcrumb-item href="">
                    Application Center
                </a-breadcrumb-item>
                <a-breadcrumb-separator/>
                <a-breadcrumb-item href="">
                    Application List
                </a-breadcrumb-item>
                <a-breadcrumb-separator/>
                <a-breadcrumb-item>An Application</a-breadcrumb-item>
            </a-breadcrumb>

            <a-divider>Dropdown 下拉菜单示例</a-divider>
            <a-dropdown-button @click="handleButtonClick">
                Dropdown
                <a-menu slot="overlay" @click="handleMenuClick">
                    <a-menu-item key="1">
                        <a-icon type="user"/>
                        1st menu item
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-icon type="user"/>
                        2nd menu item
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-icon type="user"/>
                        3rd item
                    </a-menu-item>
                </a-menu>
            </a-dropdown-button>
            <a-dropdown-button>
                Dropdown
                <a-menu slot="overlay" @click="handleMenuClick">
                    <a-menu-item key="1">
                        <a-icon type="user"/>
                        1st menu item
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-icon type="user"/>
                        2nd menu item
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-icon type="user"/>
                        3rd item
                    </a-menu-item>
                </a-menu>
                <a-icon slot="icon" type="user"/>
            </a-dropdown-button>
            <a-dropdown-button disabled style="margin-left: 8px" @click="handleButtonClick">
                Dropdown
                <a-menu slot="overlay" @click="handleMenuClick">
                    <a-menu-item key="1">
                        <a-icon type="user"/>
                        1st menu item
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-icon type="user"/>
                        2nd menu item
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-icon type="user"/>
                        3rd item
                    </a-menu-item>
                </a-menu>
            </a-dropdown-button>
            <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick">
                    <a-menu-item key="1">
                        <a-icon type="user"/>
                        1st menu item
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-icon type="user"/>
                        2nd menu item
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-icon type="user"/>
                        3rd item
                    </a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> Button
                    <a-icon type="down"/>
                </a-button>
            </a-dropdown>

            <a-divider>Menu 导航菜单示例</a-divider>
            <div style="width: 256px">
                <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
                    <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>
                </a-button>
                <a-menu
                        :default-selected-keys="['1']"
                        :default-open-keys="['sub1']"
                        mode="inline"
                        theme="dark"
                        :inline-collapsed="collapsed"
                >
                    <a-menu-item key="1">
                        <a-icon type="pie-chart"/>
                        <span>Option 1</span>
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-icon type="desktop"/>
                        <span>Option 2</span>
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-icon type="inbox"/>
                        <span>Option 3</span>
                    </a-menu-item>
                    <a-sub-menu key="sub1">
                        <span slot="title"><a-icon type="mail"/><span>Navigation One</span></span>
                        <a-menu-item key="5">
                            Option 5
                        </a-menu-item>
                        <a-menu-item key="6">
                            Option 6
                        </a-menu-item>
                        <a-menu-item key="7">
                            Option 7
                        </a-menu-item>
                        <a-menu-item key="8">
                            Option 8
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="sub2">
                        <span slot="title"><a-icon type="appstore"/><span>Navigation Two</span></span>
                        <a-menu-item key="9">
                            Option 9
                        </a-menu-item>
                        <a-menu-item key="10">
                            Option 10
                        </a-menu-item>
                        <a-sub-menu key="sub3" title="Submenu">
                            <a-menu-item key="11">
                                Option 11
                            </a-menu-item>
                            <a-menu-item key="12">
                                Option 12
                            </a-menu-item>
                        </a-sub-menu>
                    </a-sub-menu>
                </a-menu>
            </div>

            <a-divider>PageHeader 页头示例</a-divider>
            <a-page-header
                    style="border: 1px solid rgb(235, 237, 240)"
                    title="Title"
                    sub-title="This is a subtitle"
                    @back="() => $router.go(-1)"
            >
                <template slot="extra">
                    <a-button key="3">
                        Operation
                    </a-button>
                    <a-button key="2">
                        Operation
                    </a-button>
                    <a-button key="1" type="primary">
                        Primary
                    </a-button>
                </template>
                <a-descriptions size="small" :column="3">
                    <a-descriptions-item label="Created">
                        Lili Qu
                    </a-descriptions-item>
                    <a-descriptions-item label="Association">
                        <a>421421</a>
                    </a-descriptions-item>
                    <a-descriptions-item label="Creation Time">
                        2017-01-10
                    </a-descriptions-item>
                    <a-descriptions-item label="Effective Time">
                        2017-10-10
                    </a-descriptions-item>
                    <a-descriptions-item label="Remarks">
                        Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
                    </a-descriptions-item>
                </a-descriptions>
            </a-page-header>
            <br/>
            <a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
                <template slot="tags">
                    <a-tag color="blue">
                        Running
                    </a-tag>
                </template>
                <template slot="extra">
                    <a-button key="3">
                        Operation
                    </a-button>
                    <a-button key="2">
                        Operation
                    </a-button>
                    <a-button key="1" type="primary">
                        Primary
                    </a-button>
                </template>
                <a-row type="flex">
                    <a-statistic title="Status" value="Pending"/>
                    <a-statistic
                            title="Price"
                            prefix="$"
                            :value="568.08"
                            :style="{
            margin: '0 32px',
          }"
                    />
                    <a-statistic title="Balance" prefix="$" :value="3345.08"/>
                </a-row>
            </a-page-header>

            <a-divider>Pagination 分页示例</a-divider>
            <div>
                <a-pagination show-quick-jumper :default-current="2" :total="500" @change="onChange"/>
                <br/>
                <a-pagination
                        show-quick-jumper
                        :default-current="2"
                        :total="500"
                        disabled
                        show-less-items
                        @change="onChange"
                />
            </div>

            <a-divider>Steps 步骤条示例</a-divider>
            <a-steps>
                <a-step status="finish" title="Login">
                    <a-icon slot="icon" type="user"/>
                </a-step>
                <a-step status="finish" title="Verification">
                    <a-icon slot="icon" type="solution"/>
                </a-step>
                <a-step status="process" title="Pay">
                    <a-icon slot="icon" type="loading"/>
                </a-step>
                <a-step status="wait" title="Done">
                    <a-icon slot="icon" type="smile-o"/>
                </a-step>
            </a-steps>

            <a-divider>AutoComplete 自动完成示例</a-divider>
            <a-auto-complete
                    v-model="value2"
                    :data-source="dataSource2"
                    style="width: 200px"
                    placeholder="input here"
                    @select="onSelect2"
                    @search="onSearch2"
                    @change="onChange2"
            />

            <a-divider>Cascader 级联选择示例</a-divider>
            <a-cascader :options="options3" placeholder="Please select" @change="onChange3"/>

            <a-divider>Checkbox 多选框示例</a-divider>
            <div>
                <div :style="{ borderBottom: '1px solid #E9E9E9' }">
                    <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                        Check all
                    </a-checkbox>
                </div>
                <br/>
                <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange4"/>
            </div>

            <a-divider>DatePicker 日期选择框示例</a-divider>
            <div>
                <a-date-picker @change="onChange5"/>
                <br/>
                <a-month-picker placeholder="Select month" @change="onChange5"/>
                <br/>
                <a-range-picker @change="onChange"/>
                <br/>
                <a-week-picker placeholder="Select week" @change="onChange5"/>
            </div>

            <a-divider>Input 输入框示例</a-divider>
            <div>
                <a-input-search placeholder="input search text" style="width: 200px" @search="onSearch"/>
                <br/><br/>
                <a-input-search placeholder="input search text" enter-button @search="onSearch"/>
                <br/><br/>
                <a-input-search
                        placeholder="input search text"
                        enter-button="Search"
                        size="large"
                        @search="onSearch"
                />
                <br/><br/>
                <a-input-search placeholder="input search text" size="large" @search="onSearch">
                    <a-button slot="enterButton">
                        Custom
                    </a-button>
                </a-input-search>
            </div>

            <a-divider>Form 表单示例</a-divider>
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                <a-form-item label="Note">
                    <a-input
                            v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                    />
                </a-form-item>
                <a-form-item label="Gender">
                    <a-select
                            v-decorator="[
          'gender',
          { rules: [{ required: true, message: 'Please select your gender!' }] },
        ]"
                            placeholder="Select a option and change input text above"
                            @change="handleSelectChange"
                    >
                        <a-select-option value="male">
                            male
                        </a-select-option>
                        <a-select-option value="female">
                            female
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" html-type="submit">
                        Submit
                    </a-button>
                </a-form-item>
            </a-form>

            <a-divider>FormModel 表单 (支持 v-model 检验)示例</a-divider>
            <a-form-model layout="inline" :model="formInline" @submit="handleSubmit2" @submit.native.prevent>
                <a-form-model-item>
                    <a-input v-model="formInline.user" placeholder="Username">
                        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-input v-model="formInline.password" type="password" placeholder="Password">
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button
                            type="primary"
                            html-type="submit"
                            :disabled="formInline.user === '' || formInline.password === ''"
                    >
                        Log in
                    </a-button>
                </a-form-model-item>
            </a-form-model>

            <a-divider>数字输入框示例</a-divider>
            <a-input-number id="inputNumber" v-model="value11" :min="1" :max="10" @change="onChange"/>
            当前值：{{ value11 }}

            <a-divider>Mentions 提及示例</a-divider>
            <a-mentions v-model="value12" @change="onChange12" @select="onSelect12">
                <a-mentions-option value="afc163">
                    afc163
                </a-mentions-option>
                <a-mentions-option value="zombieJ">
                    zombieJ
                </a-mentions-option>
                <a-mentions-option value="yesmeck">
                    yesmeck
                </a-mentions-option>
            </a-mentions>

            <a-divider>单选框示例</a-divider>
            <div>
                <a-radio-group default-value="a" button-style="solid">
                    <a-radio-button value="a">
                        Hangzhou
                    </a-radio-button>
                    <a-radio-button value="b">
                        Shanghai
                    </a-radio-button>
                    <a-radio-button value="c">
                        Beijing
                    </a-radio-button>
                    <a-radio-button value="d">
                        Chengdu
                    </a-radio-button>
                </a-radio-group>
            </div>
            <div :style="{ marginTop: '16px' }">
                <a-radio-group default-value="c" button-style="solid">
                    <a-radio-button value="a">
                        Hangzhou
                    </a-radio-button>
                    <a-radio-button value="b" disabled>
                        Shanghai
                    </a-radio-button>
                    <a-radio-button value="c">
                        Beijing
                    </a-radio-button>
                    <a-radio-button value="d">
                        Chengdu
                    </a-radio-button>
                </a-radio-group>
            </div>

            <a-divider>Rate 评分示例</a-divider>
            <a-rate v-model="value13"/>

            <a-divider>Select 选择器示例</a-divider>
            <div>
                <a-radio-group v-model="size">
                    <a-radio-button value="large">
                        Large
                    </a-radio-button>
                    <a-radio-button value="default">
                        Default
                    </a-radio-button>
                    <a-radio-button value="small">
                        Small
                    </a-radio-button>
                </a-radio-group>
                <br/><br/>
                <a-select :size="size" default-value="a1" style="width: 200px" @change="handleChange14">
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                        {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                </a-select>
                <br/>
                <a-select
                        mode="multiple"
                        :size="size"
                        placeholder="Please select"
                        :default-value="['a1', 'b2']"
                        style="width: 200px"
                        @change="handleChange14"
                        @popupScroll="popupScroll14"
                >
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                        {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                </a-select>
                <br/>
                <a-select
                        mode="tags"
                        :size="size"
                        placeholder="Please select"
                        :default-value="['a1', 'b2']"
                        style="width: 200px"
                        @change="handleChange14"
                >
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                        {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                </a-select>
            </div>

            <a-divider>Slider 滑动输入条示例</a-divider>
            <div>
                <a-row>
                    <a-col :span="12">
                        <a-slider v-model="inputValue1" :min="1" :max="20"/>
                    </a-col>
                    <a-col :span="4">
                        <a-input-number v-model="inputValue1" :min="1" :max="20" style="marginLeft: 16px"/>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-slider v-model="inputValue" :min="0" :max="1" :step="0.01"/>
                    </a-col>
                    <a-col :span="4">
                        <a-input-number
                                v-model="inputValue"
                                :min="0"
                                :max="1"
                                :step="0.01"
                                style="marginLeft: 16px"
                        />
                    </a-col>
                </a-row>
            </div>

            <a-divider>Switch 开关示例</a-divider>
            <div>
                <a-switch checked-children="开" un-checked-children="关" default-checked/>
                <br/>
                <a-switch checked-children="1" un-checked-children="0"/>
                <br/>
                <a-switch default-checked>
                    <a-icon slot="checkedChildren" type="check"/>
                    <a-icon slot="unCheckedChildren" type="close"/>
                </a-switch>
            </div>

            <a-divider>TimePicker 时间选择框示例</a-divider>
            <a-time-picker :minute-step="15" :second-step="10"/>

            <a-divider>穿梭框示例</a-divider>
            <div>
                <a-transfer
                        :data-source="mockData"
                        :titles="['Source', 'Target']"
                        :target-keys="targetKeys"
                        :selected-keys="selectedKeys"
                        :render="item => item.title"
                        :disabled="disabled"
                        @change="handleChange"
                        @selectChange="handleSelectChange15"
                        @scroll="handleScroll15"
                />
                <a-switch
                        un-checked-children="enabled"
                        checked-children="disabled"
                        :checked="disabled"
                        style="margin-top: 16px"
                        @change="handleDisable15"
                />
            </div>

            <a-divider>树型选择控件示例</a-divider>
            <a-tree-select
                    v-model="value"
                    show-search
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="Please select"
                    allow-clear
                    tree-default-expand-all
            >
                <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
                    <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
                        <a-tree-select-node key="random" :selectable="false" value="leaf1" title="my leaf"/>
                        <a-tree-select-node key="random1" value="leaf2" title="your leaf"/>
                    </a-tree-select-node>
                    <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
                        <a-tree-select-node key="random3" value="sss">
                            <b slot="title" style="color: #08c">sss</b>
                        </a-tree-select-node>
                    </a-tree-select-node>
                </a-tree-select-node>
            </a-tree-select>

            <a-divider>Avatar头像示例</a-divider>
            <div>
                <div>
                    <a-avatar :size="64" icon="user"/>
                    <a-avatar size="large" icon="user"/>
                    <a-avatar icon="user"/>
                    <a-avatar size="small" icon="user"/>
                </div>
                <br/>
                <div>
                    <a-avatar shape="square" :size="64" icon="user"/>
                    <a-avatar shape="square" size="large" icon="user"/>
                    <a-avatar shape="square" icon="user"/>
                    <a-avatar shape="square" size="small" icon="user"/>
                </div>
            </div>

            <a-divider>Badge徽标数示例</a-divider>
            <div>
                <a-badge :count="99">
                    <a href="#" class="head-example"/>
                </a-badge>
                <a-badge :count="100">
                    <a href="#" class="head-example"/>
                </a-badge>
                <a-badge :count="99" :overflow-count="10">
                    <a href="#" class="head-example"/>
                </a-badge>
                <a-badge :count="1000" :overflow-count="999">
                    <a href="#" class="head-example"/>
                </a-badge>
            </div>

            <a-divider>Calendar 日历示例</a-divider>
            <a-calendar @panelChange="onPanelChange"/>

            <a-divider>Card 卡片示例</a-divider>
            <div style="background-color: #ececec; padding: 20px;">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <a-card title="Card title" :bordered="false">
                            <p>card content</p>
                        </a-card>
                    </a-col>
                    <a-col :span="8">
                        <a-card title="Card title" :bordered="false">
                            <p>card content</p>
                        </a-card>
                    </a-col>
                    <a-col :span="8">
                        <a-card title="Card title" :bordered="false">
                            <p>card content</p>
                        </a-card>
                    </a-col>
                </a-row>
            </div>

            <a-divider>Carousel 走马灯示例</a-divider>
            <a-carousel :after-change="onChange17">
                <div><h3>1</h3></div>
                <div><h3>2</h3></div>
                <div><h3>3</h3></div>
                <div><h3>4</h3></div>
            </a-carousel>

            <a-divider>Collapse折叠面板示例</a-divider>
            <div>
                <a-collapse v-model="activeKey">
                    <a-collapse-panel key="1" header="This is panel header 1">
                        <p>{{ text }}</p>
                    </a-collapse-panel>
                    <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
                        <p>{{ text }}</p>
                    </a-collapse-panel>
                    <a-collapse-panel key="3" header="This is panel header 3" disabled>
                        <p>{{ text }}</p>
                    </a-collapse-panel>
                </a-collapse>
            </div>

            <a-divider>Comment评论示例</a-divider>
            <a-comment>
                <span slot="actions" key="comment-nested-reply-to">Reply to</span>
                <a slot="author">Han Solo</a>
                <a-avatar
                        slot="avatar"
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                />
                <p slot="content">
                    We supply a series of design principles, practical patterns and high quality design resources
                    (Sketch and Axure).
                </p>
                <a-comment>
                    <span slot="actions">Reply to</span>
                    <a slot="author">Han Solo</a>
                    <a-avatar
                            slot="avatar"
                            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                            alt="Han Solo"
                    />
                    <p slot="content">
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure).
                    </p>
                    <a-comment>
                        <span slot="actions">Reply to</span>
                        <a slot="author">Han Solo</a>
                        <a-avatar
                                slot="avatar"
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                alt="Han Solo"
                        />
                        <p slot="content">
                            We supply a series of design principles, practical patterns and high quality design
                            resources (Sketch and Axure).
                        </p>
                    </a-comment>
                    <a-comment>
                        <span slot="actions">Reply to</span>
                        <a slot="author">Han Solo</a>
                        <a-avatar
                                slot="avatar"
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                alt="Han Solo"
                        />
                        <p slot="content">
                            We supply a series of design principles, practical patterns and high quality design
                            resources (Sketch and Axure).
                        </p>
                    </a-comment>
                </a-comment>
            </a-comment>

            <a-divider>Descriptions 描述列表 示例</a-divider>
            <a-descriptions title="User Info" bordered>
                <a-descriptions-item label="Product">
                    Cloud Database
                </a-descriptions-item>
                <a-descriptions-item label="Billing Mode">
                    Prepaid
                </a-descriptions-item>
                <a-descriptions-item label="Automatic Renewal">
                    YES
                </a-descriptions-item>
                <a-descriptions-item label="Order time">
                    2018-04-24 18:00:00
                </a-descriptions-item>
                <a-descriptions-item label="Usage Time" :span="2">
                    2019-04-24 18:00:00
                </a-descriptions-item>
                <a-descriptions-item label="Status" :span="3">
                    <a-badge status="processing" text="Running"/>
                </a-descriptions-item>
                <a-descriptions-item label="Negotiated Amount">
                    $80.00
                </a-descriptions-item>
                <a-descriptions-item label="Discount">
                    $20.00
                </a-descriptions-item>
                <a-descriptions-item label="Official Receipts">
                    $60.00
                </a-descriptions-item>
                <a-descriptions-item label="Config Info">
                    Data disk type: MongoDB
                    <br/>
                    Database version: 3.4
                    <br/>
                    Package: dds.mongo.mid
                    <br/>
                    Storage space: 10 GB
                    <br/>
                    Replication factor: 3
                    <br/>
                    Region: East China 1<br/>
                </a-descriptions-item>
            </a-descriptions>

            <a-divider>空状态示例</a-divider>
            <a-empty/>

            <a-divider>列表示例</a-divider>
            <a-list item-layout="horizontal" :data-source="data18">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta
                            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                    >
                        <a slot="title" href="https://www.antdv.com/">{{ item.title }}</a>
                        <a-avatar
                                slot="avatar"
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        />
                    </a-list-item-meta>
                </a-list-item>
            </a-list>

            <a-divider>Popover示例</a-divider>
            <div>
                <a-popover placement="topLeft">
                    <template slot="content">
                        <p>Content</p>
                        <p>Content</p>
                    </template>
                    <span slot="title">Title</span>
                    <a-button>Align edge / 边缘对齐</a-button>
                </a-popover>
                <a-popover placement="topLeft" arrow-point-at-center>
                    <template slot="content">
                        <p>Content</p>
                        <p>Content</p>
                    </template>
                    <span slot="title">Title</span>
                    <a-button>Arrow points to center / 箭头指向中心</a-button>
                </a-popover>
            </div>

            <a-divider>Statistic 统计数值示例</a-divider>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-statistic-countdown
                            title="Countdown"
                            :value="deadline"
                            style="margin-right: 50px"
                            @finish="onFinish"
                    />
                </a-col>
                <a-col :span="12">
                    <a-statistic-countdown
                            title="Million Seconds"
                            :value="deadline"
                            format="HH:mm:ss:SSS"
                            style="margin-right: 50px"
                    />
                </a-col>
                <a-col :span="24" style="margin-top: 32px;">
                    <a-statistic-countdown title="Day Level" :value="deadline" format="D 天 H 时 m 分 s 秒" />
                </a-col>
            </a-row>

            <a-divider>表格示例</a-divider>
            <a-table :columns="columns19" :data-source="data19" bordered>
                <template slot="name" slot-scope="text">
                    <a>{{ text }}</a>
                </template>
                <template slot="title" slot-scope="currentPageData">
                    Header
                </template>
                <template slot="footer" slot-scope="currentPageData">
                    Footer
                </template>
            </a-table>

            <a-divider>Tabs 标签页示例</a-divider>
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="Tab 1">
                    Tab 1
                </a-tab-pane>
                <a-tab-pane key="2" tab="Tab 2" disabled>
                    Tab 2
                </a-tab-pane>
                <a-tab-pane key="3" tab="Tab 3">
                    Tab 3
                </a-tab-pane>
            </a-tabs>

            <a-divider>Tag 标签示例</a-divider>
            <div>
                <h4 style="margin-bottom: 16px">
                    Presets:
                </h4>
                <div>
                    <a-tag color="pink">
                        pink
                    </a-tag>
                    <a-tag color="red">
                        red
                    </a-tag>
                    <a-tag color="orange">
                        orange
                    </a-tag>
                    <a-tag color="green">
                        green
                    </a-tag>
                    <a-tag color="cyan">
                        cyan
                    </a-tag>
                    <a-tag color="blue">
                        blue
                    </a-tag>
                    <a-tag color="purple">
                        purple
                    </a-tag>
                </div>
                <h4 style="margin: '16px 0'">
                    Custom:
                </h4>
                <div>
                    <a-tag color="#f50">
                        #f50
                    </a-tag>
                    <a-tag color="#2db7f5">
                        #2db7f5
                    </a-tag>
                    <a-tag color="#87d068">
                        #87d068
                    </a-tag>
                    <a-tag color="#108ee9">
                        #108ee9
                    </a-tag>
                </div>
            </div>

            <a-divider>时间轴示例</a-divider>
            <a-timeline>
                <a-timeline-item color="green">
                    Create a services site 2015-09-01
                </a-timeline-item>
                <a-timeline-item color="green">
                    Create a services site 2015-09-01
                </a-timeline-item>
                <a-timeline-item color="red">
                    <p>Solve initial network problems 1</p>
                    <p>Solve initial network problems 2</p>
                    <p>Solve initial network problems 3 2015-09-01</p>
                </a-timeline-item>
                <a-timeline-item>
                    <p>Technical testing 1</p>
                    <p>Technical testing 2</p>
                    <p>Technical testing 3 2015-09-01</p>
                </a-timeline-item>
                <a-timeline-item color="gray">
                    <p>Technical testing 1</p>
                    <p>Technical testing 2</p>
                    <p>Technical testing 3 2015-09-01</p>
                </a-timeline-item>
                <a-timeline-item color="gray">
                    <p>Technical testing 1</p>
                    <p>Technical testing 2</p>
                    <p>Technical testing 3 2015-09-01</p>
                </a-timeline-item>
            </a-timeline>

            <a-divider>Tooltip 示例</a-divider>
            <div>
                <a-tooltip placement="topLeft" title="Prompt Text">
                    <a-button>Align edge / 边缘对齐</a-button>
                </a-tooltip>
                <a-tooltip placement="topLeft" title="Prompt Text" arrow-point-at-center>
                    <a-button>Arrow points to center / 箭头指向中心</a-button>
                </a-tooltip>
            </div>

            <a-divider>树形控件示例</a-divider>
            <a-tree
                    v-model="checkedKeys"
                    checkable
                    :expanded-keys="expandedKeys"
                    :auto-expand-parent="autoExpandParent"
                    :selected-keys="selectedKeys20"
                    :tree-data="treeData"
                    @expand="onExpand20"
                    @select="onSelect20"
            />

            <a-divider>Alert 警告提示示例</a-divider>
            <div>
                <a-alert message="Success Tips" type="success" show-icon />
                <a-alert message="Informational Notes" type="info" show-icon />
                <a-alert message="Warning" type="warning" show-icon />
                <a-alert message="Error" type="error" show-icon />
                <a-alert
                        message="Success Tips"
                        description="Detailed description and advices about successful copywriting."
                        type="success"
                        show-icon
                />
                <a-alert
                        message="Informational Notes"
                        description="Additional description and informations about copywriting."
                        type="info"
                        show-icon
                />
                <a-alert
                        message="Warning"
                        description="This is a warning notice about copywriting."
                        type="warning"
                        show-icon
                />
                <a-alert
                        message="Error"
                        description="This is an error message about copywriting."
                        type="error"
                        show-icon
                />
            </div>

            <a-divider>Drawer 抽屉示例</a-divider>
            <div>
                <a-radio-group style="margin-right: 8px" :default-value="placement" @change="onChange21">
                    <a-radio value="top">
                        top
                    </a-radio>
                    <a-radio value="right">
                        right
                    </a-radio>
                    <a-radio value="bottom">
                        bottom
                    </a-radio>
                    <a-radio value="left">
                        left
                    </a-radio>
                </a-radio-group>
                <a-button type="primary" @click="showDrawer21">
                    Open
                </a-button>
                <a-drawer
                        title="Basic Drawer"
                        :placement="placement21"
                        :closable="false"
                        :visible="visible21"
                        @close="onClose21"
                >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </a-drawer>
            </div>

            <a-divider>BackTop 回到顶部示例</a-divider>
            <div id="components-back-top-demo-custom">
                <a-back-top>
                    <div class="ant-back-top-inner">
                        UP
                    </div>
                </a-back-top>
                Scroll down to see the bottom-right
                <strong style="color: #1088e9"> blue </strong>
                button.
            </div>
            <a-divider>全局提示示例</a-divider>
            <div>
                <a-button @click="success">
                    Success
                </a-button>
                <a-button @click="error">
                    Error
                </a-button>
                <a-button @click="warning">
                    Warning
                </a-button>
            </div>

            <a-divider>Modal 对话框示例</a-divider>
            <div>
                <a-button @click="showConfirm">
                    Confirm
                </a-button>
                <a-button type="dashed" @click="showDeleteConfirm">
                    Delete
                </a-button>
                <a-button type="dashed" @click="showPropsConfirm">
                    With extra props
                </a-button>
            </div>

            <a-divider>通知提醒框示例</a-divider>
            <a-button type="primary" @click="openNotification">
                Open the notification box
            </a-button>

            <a-divider>Popconfirm示例</a-divider>
            <a-popconfirm title="Are you sure？" ok-text="Yes" cancel-text="No">
                <a href="#">Delete</a>
            </a-popconfirm>

            <a-divider>Progress 进度条示例</a-divider>
            <div style="width: 170px">
                <a-progress :percent="30" size="small" />
                <a-progress :percent="50" size="small" status="active" />
                <a-progress :percent="70" size="small" status="exception" />
                <a-progress :percent="100" size="small" />
            </div>

            <a-divider>Result 结果示例</a-divider>
            <a-result
                    status="success"
                    title="Successfully Purchased Cloud Server ECS!"
                    sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
            >
                <template #extra>
                    <a-button key="console" type="primary">
                        Go Console
                    </a-button>
                    <a-button key="buy">
                        Buy Again
                    </a-button>
                </template>
            </a-result>

            <a-divider>加载占位图示例</a-divider>
            <a-skeleton avatar :paragraph="{ rows: 4 }" />

            <a-divider>Spin 加载中示例</a-divider>
            <div>
                <a-spin size="small" />
                <a-spin />
                <a-spin size="large" />
            </div>

            <a-divider>Anchor 锚点示例</a-divider>
            <a-anchor :affix="false" :get-current-anchor="getCurrentAnchor">
                <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
                <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
                <a-anchor-link href="#API" title="API">
                    <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
                    <a-anchor-link href="#Link-Props" title="Link Props" />
                </a-anchor-link>
            </a-anchor>


        </div>
    </a-locale-provider>
</template>

<script>
    const {locales} = window.antd;
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const defaultCheckedList = ['Apple', 'Orange'];

    export default {
        props: {
            widgetID: String
        },
        data() {
            const mockData = [];
            for (let i = 0; i < 20; i++) {
                mockData.push({
                    key: i.toString(),
                    title: `content${i + 1}`,
                    description: `description of content${i + 1}`,
                    disabled: i % 3 < 1,
                });
            }
            const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
            return {
                visible21: false,
                placement21: 'left',
                expandedKeys: ['0-0-0', '0-0-1'],
                autoExpandParent: true,
                checkedKeys: ['0-0-0'],
                selectedKeys20: [],
                treeData:[
                    {
                        title: '0-0',
                        key: '0-0',
                        children: [
                            {
                                title: '0-0-0',
                                key: '0-0-0',
                                children: [
                                    { title: '0-0-0-0', key: '0-0-0-0' },
                                    { title: '0-0-0-1', key: '0-0-0-1' },
                                    { title: '0-0-0-2', key: '0-0-0-2' },
                                ],
                            },
                            {
                                title: '0-0-1',
                                key: '0-0-1',
                                children: [
                                    { title: '0-0-1-0', key: '0-0-1-0' },
                                    { title: '0-0-1-1', key: '0-0-1-1' },
                                    { title: '0-0-1-2', key: '0-0-1-2' },
                                ],
                            },
                            {
                                title: '0-0-2',
                                key: '0-0-2',
                            },
                        ],
                    },
                    {
                        title: '0-1',
                        key: '0-1',
                        children: [
                            { title: '0-1-0-0', key: '0-1-0-0' },
                            { title: '0-1-0-1', key: '0-1-0-1' },
                            { title: '0-1-0-2', key: '0-1-0-2' },
                        ],
                    },
                    {
                        title: '0-2',
                        key: '0-2',
                    },
                ],
                data19: [
                    {
                        key: '1',
                        name: 'John Brown',
                        money: '￥300,000.00',
                        address: 'New York No. 1 Lake Park',
                    },
                    {
                        key: '2',
                        name: 'Jim Green',
                        money: '￥1,256,000.00',
                        address: 'London No. 1 Lake Park',
                    },
                    {
                        key: '3',
                        name: 'Joe Black',
                        money: '￥120,000.00',
                        address: 'Sidney No. 1 Lake Park',
                    },
                ],
                columns19: [
                    {
                        title: 'Name',
                        dataIndex: 'name',
                        scopedSlots: { customRender: 'name' },
                    },
                    {
                        title: 'Cash Assets',
                        className: 'column-money',
                        dataIndex: 'money',
                    },
                    {
                        title: 'Address',
                        dataIndex: 'address',
                    },
                ],
                deadline: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
                data18: [
                    {
                        title: 'Ant Design Title 1',
                    },
                    {
                        title: 'Ant Design Title 2',
                    },
                    {
                        title: 'Ant Design Title 3',
                    },
                    {
                        title: 'Ant Design Title 4',
                    },
                ],
                text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
                activeKey: ['1'],
                mockData,
                targetKeys: oriTargetKeys,
                selectedKeys: ['1', '4'],
                disabled: false,
                inputValue: 0,
                inputValue1: 1,
                size: 'default',
                value13: 2,
                value12: '@afc163',
                value11: 3,
                formInline: {
                    user: '',
                    password: '',
                },
                formLayout: 'horizontal',
                form: this.$form.createForm(this, {name: 'coordinated'}),
                locale: this.getLocale(),
                checkedList: defaultCheckedList,
                indeterminate: true,
                checkAll: false,
                plainOptions,
                options3: [
                    {
                        value: 'zhejiang',
                        label: 'Zhejiang',
                        children: [
                            {
                                value: 'hangzhou',
                                label: 'Hangzhou',
                                children: [
                                    {
                                        value: 'xihu',
                                        label: 'West Lake',
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        value: 'jiangsu',
                        label: 'Jiangsu',
                        children: [
                            {
                                value: 'nanjing',
                                label: 'Nanjing',
                                children: [
                                    {
                                        value: 'zhonghuamen',
                                        label: 'Zhong Hua Men',
                                    },
                                ],
                            },
                        ],
                    },
                ],
                collapsed: false,
                value: '',
                dataSource2: [],
            }
        },
        watch: {
            checkedKeys(val) {
                console.log('onCheck', val);
            },
            value2(val) {
                console.log('value', val);
            },
            activeKey(key) {
                console.log(key);
            },
        },
        methods: {
            getCurrentAnchor() {
                return '#components-anchor-demo-static';
            },
            openNotification() {
                this.$notification.open({
                    message: 'Notification Title',
                    description:
                        'I will never close automatically. I will be close automatically. I will never close automatically.',
                    duration: 0,
                });
            },
            showConfirm() {
                this.$confirm({
                    title: 'Do you Want to delete these items?',
                    content: h => <div style="color:red;">Some descriptions</div>,
                onOk() {
                    console.log('OK');
                },
                onCancel() {
                    console.log('Cancel');
                },
            class: 'test',
            });
            },

            showDeleteConfirm() {
                this.$confirm({
                    title: 'Are you sure delete this task?',
                    content: 'Some descriptions',
                    okText: 'Yes',
                    okType: 'danger',
                    cancelText: 'No',
                    onOk() {
                        console.log('OK');
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
            },
            showPropsConfirm() {
                this.$confirm({
                    title: 'Are you sure delete this task?',
                    content: 'Some descriptions',
                    okText: 'Yes',
                    okType: 'danger',
                    okButtonProps: {
                        props: { disabled: true },
                    },
                    cancelText: 'No',
                    onOk() {
                        console.log('OK');
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
            },
            success() {
                this.$message.success('This is a success message');
            },
            error() {
                this.$message.error('This is an error message');
            },
            warning() {
                this.$message.warning('This is a warning message');
            },
            showDrawer21() {
                this.visible = true;
            },
            onClose21() {
                this.visible = false;
            },
            onChange21(e) {
                this.placement = e.target.value;
            },
            onExpand20(expandedKeys) {
                console.log('onExpand', expandedKeys);
                // if not set autoExpandParent to false, if children expanded, parent can not collapse.
                // or, you can remove all expanded children keys.
                this.expandedKeys = expandedKeys;
                this.autoExpandParent = false;
            },
            onCheck20(checkedKeys) {
                console.log('onCheck', checkedKeys);
                this.checkedKeys = checkedKeys;
            },
            onSelect20(selectedKeys, info) {
                console.log('onSelect', info);
                this.selectedKeys = selectedKeys;
            },
            onFinish() {
                console.log('finished!');
            },
            onChange17(a, b, c) {
                console.log(a, b, c);
            },
            onPanelChange(value, mode) {
                console.log(value, mode);
            },
            handleChange15(nextTargetKeys, direction, moveKeys) {
                this.targetKeys = nextTargetKeys;

                console.log('targetKeys: ', nextTargetKeys);
                console.log('direction: ', direction);
                console.log('moveKeys: ', moveKeys);
            },
            handleSelectChange15(sourceSelectedKeys, targetSelectedKeys) {
                this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];

                console.log('sourceSelectedKeys: ', sourceSelectedKeys);
                console.log('targetSelectedKeys: ', targetSelectedKeys);
            },
            handleScroll15(direction, e) {
                console.log('direction:', direction);
                console.log('target:', e.target);
            },
            handleDisable15(disabled) {
                this.disabled = disabled;
            },
            handleChange14(value) {
                console.log(`Selected: ${value}`);
            },
            popupScroll14() {
                console.log('popupScroll');
            },
            onSelect12(option) {
                console.log('select', option);
            },
            onChange12(value) {
                console.log('Change:', value);
            },
            onChange11(value) {
                console.log('changed', value);
            },
            handleSubmit2(e) {
                console.log(this.formInline);
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleSelectChange(value) {
                console.log(value);
                this.form.setFieldsValue({
                    note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
                });
            },
            onSearch(value) {
                console.log(value);
            },
            onChange5(date, dateString) {
                console.log(date, dateString);
            },
            onChange4(checkedList) {
                this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
                this.checkAll = checkedList.length === plainOptions.length;
            },
            onCheckAllChange(e) {
                Object.assign(this, {
                    checkedList: e.target.checked ? plainOptions : [],
                    indeterminate: false,
                    checkAll: e.target.checked,
                });
            },
            onChange3(value) {
                console.log(value);
            },
            onSearch2(searchText) {
                this.dataSource2 = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
            },
            onSelect2(value) {
                console.log('onSelect', value);
            },
            onChange2(value) {
                console.log('onChange', value);
            },
            handleButtonClick(e) {
                console.log('click left button', e);
            },
            handleMenuClick(e) {
                console.log('click', e);
            },
            toggleCollapsed() {
                this.collapsed = !this.collapsed;
            },
            onChange(pageNumber) {
                console.log('Page: ', pageNumber);
            },
            getLocale() {
                // 从环境中取国际化信息
                let code = mx.session.sessionData.locale.code;
                console.log(code);
                if ("zh_CN" === code) {
                    return locales.zh_CN;
                } else {
                    return locales.en_US;
                }
            }
        }
        ,
        mounted() {
            let vm = this;
            // The mendix init data to vue
            this.$parent.$on('widget-loaded', data => {
                for (const key in data) {
                    if (data.hasOwnProperty(key)) {
                        const element = data[key];
                        vm[key] = element;
                    }
                }
            });

            // The mendix contextobj is change will call this
            this.$parent.$on("widget-change", data => {

            });
        }
    }
</script>

<style lang="css" scoped>
    #components-back-top-demo-custom .ant-back-top {
        bottom: 100px;
    }
    #components-back-top-demo-custom .ant-back-top-inner {
        height: 40px;
        width: 40px;
        line-height: 40px;
        border-radius: 4px;
        background-color: #1088e9;
        color: #fff;
        text-align: center;
        font-size: 20px;
    }
    th.column-money,
    td.column-money {
        text-align: right !important;
    }
    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 160px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden;
    }

    .ant-carousel >>> .slick-slide h3 {
        color: #fff;
    }

    .code-box-demo .ant-slider {
        margin-bottom: 16px;
    }

    .icons-list >>> .anticon {
        margin-right: 6px;
        font-size: 24px;
    }
</style>